<!-- 预约管理页面 -->
<template>
    <div class="tutoring-booking">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>我的预约</span>
                </div>
            </template>

            <el-table :data="bookings" style="width: 100%">
                <el-table-column width="80">
                    <template #default="scope">
                        <el-avatar :src="scope.row.teacherAvatar" />
                    </template>
                </el-table-column>
                <el-table-column prop="teacherName" label="教师" />
                <el-table-column prop="tutoringTitle" label="家教课程" />
                <el-table-column label="预约时间">
                    <template #default="scope">
                        {{ formatDateTime(scope.row.startTime) }} 至 {{ formatDateTime(scope.row.endTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="location" label="上课地点" />
                <el-table-column prop="requirements" label="具体要求" show-overflow-tooltip />
                <el-table-column prop="status" label="状态">
                    <template #default="scope">
                        <el-tag :type="getStatusType(scope.row.status)">
                            {{ getStatusText(scope.row.status) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template #default="scope">
                        <el-button
                            v-if="scope.row.status === 3"
                            type="danger"
                            size="small"
                            @click="deleteBooking(scope.row.id)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { tutoringService } from '@/api/tutoring'

const bookings = ref([])

// 获取学生的预约信息
const getStudentBookings = async () => {
    try {
        const response = await tutoringService.getStudentBookings()
        bookings.value = response.data
    } catch (error) {
        ElMessage.error('获取预约信息失败')
    }
}

// 获取状态类型
const getStatusType = (status) => {
    switch (status) {
        case 0: return 'warning'
        case 1: return 'success'
        case 2: return 'danger'
        case 3: return 'info'
        default: return 'info'
    }
}

// 获取状态文本
const getStatusText = (status) => {
    switch (status) {
        case 0: return '待确认'
        case 1: return '已接受'
        case 2: return '已拒绝'
        case 3: return '已完成'
        default: return '未知'
    }
}

// 格式化日期时间
const formatDateTime = (datetime) => {
    if (!datetime) return ''
    
    // 处理ISO 8601格式的字符串（带T和Z的格式）
    let date;
    
    if (typeof datetime === 'string') {
        // 检查是否包含'T'但不包含时区信息
        if (datetime.includes('T') && !datetime.includes('Z') && !datetime.includes('+')) {
            // 添加'Z'表示这是UTC时间，让浏览器正确转换为本地时间
            date = new Date(datetime + 'Z');
        } else {
            date = new Date(datetime);
        }
    } else {
        date = new Date(datetime);
    }
    
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
}

// 删除预约
const deleteBooking = async (id) => {
    try {
        await ElMessageBox.confirm('确定要删除这个已完成的预约吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
        
        await tutoringService.deleteBooking(id)
        ElMessage.success('删除成功')
        getStudentBookings()
    } catch (error) {
        if (error !== 'cancel') {
            ElMessage.error('删除失败')
        }
    }
}

onMounted(() => {
    getStudentBookings()
})
</script>

<style scoped>
.tutoring-booking {
    padding: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-avatar {
    margin-right: 10px;
}
</style> 